<template>
  <div class="list-page">
    <div class="list-page-search" v-if="tableInfo.showSearch">
      <NForm inline :model="tableInfo.queryForm" label-placement="left">
        <NFormItem label="标题">
          <NInput
            v-model:value="tableInfo.queryForm.name"
            placeholder="请输入标题"
            clearable
            style="width: 200px"
          />
        </NFormItem>
        <NFormItem label="分类">
          <n-select
            v-model:value="tableInfo.queryForm.type_id"
            :options="stateOptions.classify"
            label-field="name"
            placeholder="请选择分类"
            clearable
            value-field="id"
            style="width: 200px"
          />
        </NFormItem>
        <NFormItem label="人员">
          <y-select-usr
            v-model="tableInfo.queryForm.author_id"
            @change="userChange"
          />
        </NFormItem>
        <NFormItem>
          <NButton type="primary" @click="queryData">
            <template #icon>
              <n-icon>
                <i class="esayIcon esayIcon-sousuo"></i>
              </n-icon>
            </template>
            <span>搜索</span>
          </NButton>
        </NFormItem>
      </NForm>
    </div>
    <div class="list-page-main">
      <div class="pb20 flex flex-between">
        <div>
          <NButton type="primary" @click="handAdd()">
            <i class="esayIcon esayIcon-tianjiawenjianjia"></i>
            <span class="pl8">添加</span>
          </NButton>
          <NButton class="ml10" type="error" @click="handDel()">
            <i class="esayIcon esayIcon-shanchu"></i>
            <span class="pl8">批量删除</span>
          </NButton>
        </div>
        <div>
          <n-button
            tertiary
            circle
            @click="tableInfo.showSearch = !tableInfo.showSearch"
          >
            <template #icon>
              <i class="esayIcon esayIcon-sousuo"></i>
            </template>
          </n-button>
          <n-button class="ml15" tertiary circle @click="handToast">
            <template #icon>
              <i class="esayIcon esayIcon-daochu"></i>
            </template>
          </n-button>
          <n-button class="ml15" tertiary circle @click="handToast">
            <template #icon>
              <i class="esayIcon esayIcon-daoru"></i>
            </template>
          </n-button>
        </div>
      </div>
      <NDataTable
        v-model:checked-row-keys="tableInfo.checkedRowKeys"
        style="flex: 1"
        flex-height
        :scroll-x="1800"
        :columns="columns"
        :row-key="rowKey"
        :loading="tableInfo.listLoading"
        :data="tableInfo.tableData"
      />
      <div class="pagination mt20">
        <NPagination
          v-model:page="tableInfo.queryForm.pageNo"
          :page-count="tableInfo.total"
          :page-sizes="tableInfo.pageSizes"
          show-quick-jumper
          show-size-picker
          @updatePage="pageChange"
          @updatePageSize="sizeChange"
        />
      </div>
    </div>
    <Edit ref="addRef" @success="fetchData" />
    <DelConfirm ref="delRef" @confirm="delConfirm" />
    <ListDia ref="listRef" />
    <photo-detail ref="photoRef" />
    <buy-user ref="buyRef" />
  </div>
</template>

<script setup lang="ts">
import { h, ref, reactive, onMounted, provide, defineAsyncComponent } from 'vue'
import {
  NButton,
  NDataTable,
  NInput,
  NForm,
  NFormItem,
  NIcon,
  NTag,
  useMessage,
  NSelect,
  NPagination
} from 'naive-ui'
import type { DataTableColumns } from 'naive-ui'
import photoListApi from '@/service/api/photo/list'
import { useApi } from '@/hooks/useApi'
import classifyApi from '@/service/api/photo/classify'
import type { photoListState } from '@/types/options'
import YSelectUsr from '@/components/yang/yselectuser/index.vue'
const Edit = defineAsyncComponent(() => import('./edit/Edit.vue'))
const ListDia = defineAsyncComponent(() => import('./components/ListDia.vue'))
const BuyUser = defineAsyncComponent(() => import('./components/BuyUser.vue'))
const DelConfirm = defineAsyncComponent(
  () => import('@/components/nComponents/DelConfirm')
)
const PhotoDetail = defineAsyncComponent(
  () => import('@/views/photo/list/components/PhotoDetail.vue')
)
const photoRef = ref()
const handDetail = (row: any) => {
  photoRef.value.open(row.id)
}

/**
 * 抓包
 */
const userChange = (e: any) => {
  tableInfo.queryForm.author_id = e.id
  queryData()
}
const addRef = ref()
const delRef = ref()
const listRef = ref()
const handPrive = (row: any): void => {
  listRef.value.open(row)
}
const buyRef = ref()
const handBuy = (row: any): void => {
  buyRef.value.open(row)
}
const {
  handAdd,
  tableInfo,
  pageChange,
  sizeChange,
  queryData,
  fetchData,
  handDel,
  delConfirm
} = useApi({
  addRef,
  delRef,
  getData: async (params: any) => {
    const res = await photoListApi.list(params)
    res.data.data.map((el: any) => {
      el.key = el.id
      return el
    })
    return res
  },
  delData: photoListApi.dels,
  initForm: {
    name: '',
    id: null,
    author_id: null
  }
})
/**
 *  获取列表
 * */
const rowKey = (row: any) => row.id
const columns: DataTableColumns<any> = [
  {
    type: 'selection',
    options: ['all', 'none'],
    disabled(row) {
      return row.name === 'Edward King 3'
    }
  },
  {
    title: '资源标题',
    width: 200,
    key: 'name',
    align: 'center',
    render(row: any) {
      return h(
        'div',
        {
          class: 'cursor-pointer',
          onClick: () => handDetail(row)
        },
        { default: () => row.name }
      )
    }
  },
  {
    title: '购买人数',
    key: 'buy_count',
    width: 80,
    align: 'center',
    render(row: any) {
      return h(
        'div',
        {
          class: 'cursor-pointer',
          onClick: () => handBuy(row)
        },
        { default: () => row.buy_count }
      )
    }
  },
  {
    title: '举报人数',
    key: 'report_count',
    width: 80,
    align: 'center',
    render(row: any) {
      return h(
        'div',
        {
          class: 'cursor-pointer',
          onClick: () => handBuy(row)
        },
        { default: () => row.report_count }
      )
    }
  },
  {
    title: '是否私密',
    key: 'private',
    align: 'center',
    render(row: any) {
      return h(
        NTag,
        {
          type: row.private === 0 ? 'success' : 'error'
        },
        { default: () => (row.private === 0 ? '公开' : '私密') }
      )
    }
  },
  {
    title: '类型',
    key: 'tabInfo',
    width: 200,
    align: 'center',
    render(row: any) {
      return h(
        NTag,
        {
          type: 'info'
        },
        { default: () => row.tabName }
      )
    }
  },
  {
    title: '作者',
    key: 'author_id',
    width: 150,
    align: 'center',
    render(row: any) {
      return h(
        NTag,
        {
          type: 'info'
        },
        { default: () => row.author_name }
      )
    }
  },
  {
    title: '国家',
    key: 'country',
    align: 'center',
    render(row: any) {
      return h(
        NTag,
        {
          type: 'info'
        },
        { default: () => row.country }
      )
    }
  },
  {
    title: '机构',
    key: 'institution',
    align: 'center',
    render(row: any) {
      return h(
        NTag,
        {
          type: 'info'
        },
        { default: () => row.institution_name }
      )
    }
  },
  {
    title: '价格',
    key: 'price'
  },
  {
    title: '浏览量',
    key: 'view'
  },
  {
    title: '权重',
    key: 'sort'
  },
  {
    title: '操作',
    key: 'total',
    align: 'center',
    width: 200,
    fixed: 'right',
    render(row: any) {
      return h('div', [
        h(
          NButton,
          {
            size: 'small',
            type: 'success',
            onClick: () => handPrive(row)
          },
          { default: () => '图片' }
        ),
        h(
          NButton,
          {
            size: 'small',
            type: 'warning',
            class: 'ml10',
            onClick: () => handAdd(row)
          },
          { default: () => '编辑' }
        ),
        h(
          NButton,
          {
            size: 'small',
            class: 'ml10',
            type: 'error',
            onClick: () => handDel(row)
          },
          { default: () => '删除' }
        )
      ])
    }
  }
]
const toast = useMessage()
const handToast = () => {
  toast.warning('开发中')
}

const stateOptions: photoListState = reactive({
  classify: []
})
provide('stateOptions', stateOptions)
const getOptions = async () => {
  const { data } = await classifyApi.allList()
  stateOptions.classify = data
}
onMounted(() => {
  getOptions()
})
</script>

<style lang="scss" scoped></style>
